<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="UTF-8">
        <title>扁平化响应式登录界面设计</title>

        <!-- 新 Bootstrap4 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
        <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
        <!-- 移动设备优先 -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


        <style type="text/css">
            body {
                background-image: url('images/login_back.jpg');
            }

            .middle {
                margin-top: 110px;
                margin-bottom: 110px;
                padding: 100px 50px 50px 50px;
                background-color: white;
                border-radius: 15px;
                box-shadow: 10px 10px 5px rgb(0, 0, 0);

            }

            .login {
                margin-left: 20px;
            }

            .font2 {
                font-size: 0.6em;
            }

            .btn {
                border-radius: 28px;
            }

        </style>

        <script type="text/javascript">

        </script>
    </head>

    <body>
        <div class="container">
            <div class="middle mx-auto h-75 w-75">
                <div class="row">
                    <div class="col col-12 col-md-6">
                        <img class="rounded img-fluid" src="images/p2.png" alt="web开发">
                    </div>
                    <div class="col col-12 col-md-6">
                        <div class="login">
                            <h5 class="font-weight-bold">分布式秒杀商城</h5>
                            <p class="font-weight-light font2">一个服装购买平台</p>

                            <form th:action="@{/login_a}" method="post">
                                <div class="form-group">
                                    <label for="userAccount" class="sr-only">手机号</label>

                                    <input type="text" class="form-control" name="userAccount" id="userAccount" placeholder="手机号">
                                </div>

                                <div class="form-group">
                                    <label for="pwd" class="sr-only">密码:</label>
                                    <input type="password" class="form-control" name="pwd" id="pwd" placeholder="密码">
                                </div>

                                <!--<div class="xuan custom-control custom-checkbox">-->
                                <!--    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">-->
                                <!--    <label class="custom-control-label font-weight-light small" for="customCheck">记住用户名</label>-->
                                <!--</div>-->

                                <br>
                                <input type="submit" class="btn btn-primary btn-block w-75 mx-auto" value="登录">
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script>



    </script>


</html>
